<template>
<el-container class="laycenter">

  <el-header class="frow " v-if="userinfo.is_company">

    <div class="frow sc-font">
      <div class="usericon"></div>
      <div style="margin-left:20px">{{userinfo.username}} </div>
      <div>&emsp;|&emsp;</div>
      <div style="cursor: pointer">{{userinfo.dept_name}}</div>
      <div>&emsp;|&emsp;</div>
      <div style="cursor: pointer">{{userinfo.position_name}} </div>
      <div>&emsp;|&emsp;</div>
      <div style="cursor: pointer"><span  @click="goto('/change_position')">切换身份</span></div>
      <div>&emsp;|&emsp;</div>
      <div style="cursor: pointer"> <span @click="dialogFormVisible = !dialogFormVisible">个人信息</span></div>
      <div>&emsp;|&emsp;</div>
      <div style="cursor: pointer"><span  @click="loginOut">退出</span></div>
    </div>
    <div class="logo me-logo" style="align-self: flex-end; margin-top: -20px"></div>

  </el-header>

  <el-header class="clear" v-else>
    <div class="usericon fl"></div>
    <div class="userinfo fl">{{userinfo.username}}&nbsp;&nbsp;|&nbsp;&nbsp;供应商</div>
    <div class="logout fl">
      <el-link class="f20" @click="loginOut"> &nbsp;&nbsp;|&nbsp;&nbsp;退出</el-link>
    </div>
    <div class="logo fr"></div>
  </el-header>

  <el-row style="margin-top:20px;height:100vh;" :gutter="10">
      <el-col :span="18" id="leftBox">
        <div style="margin-top:15px;width:100%;margin-bottom: 8px;">
          <el-input placeholder="请输入内容" v-model="keywords" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option :label="input['text']" :value="input.typeid" v-for="(input,k) in inputs" :key="k"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="searchProject"></el-button>
          </el-input>
        </div>
        <el-main>
          <!-- 常用功能 -->
          <div class="h1 al">日常办公</div>
          <!-- 功能列表 -->
          <ul class=" menu-list grid">
            <li class="menus fcol" v-for="(v,i ) in menus_common" :key="i" @click="goto(v.path)">
                  <div class="menu-icon sc" style="cursor: pointer"><img :src="v.icon"></div>
                  <div class="menu-title sc" style="cursor: pointer">{{v.title}}</div>
            </li>

          </ul>
          <!-- 业务办理 -->
          <div class="h1 al">业务办理</div>
          <!-- 功能列表 -->
          <ul class=" menu-list grid">
            <li class="menus fcol" v-for="(v,i) in menus_wait" :key="i" @click="goto(v.path)">
                  <div class="menu-icon sc" style="cursor: pointer"><img :src="v.icon"></div>
                  <div class="menu-title sc" style="cursor: pointer">{{v.title}}</div>
            </li>
          </ul>
           <!-- 代办事项 -->
          <div class="h1 al">待办事项</div>
          <!-- 功能列表 -->
          <ul class=" menu-list grid">
            <li class="menus fcol" v-for="(v,i) in menus_handle" :key="i" @click="goto(v.path)">

                <div class="menu-icon sc" style="cursor: pointer">
                  <el-badge :value="waitCount[v.name]" class="flag" v-if="waitCount.hasOwnProperty(v.name) && waitCount[v.name]">
                  <img :src="v.icon">
                  </el-badge>

                  <img :src="v.icon" v-else>

                </div>

                  <div class="menu-title sc" style="cursor: pointer">{{v.title}}</div>
            </li>
          </ul>
      </el-main>
      </el-col>

      <el-col :span="6" id="rightBox">
          <el-aside width="100%" style="margin-top:15px;width:100%;margin-bottom: 8px;overflow: hidden;">
            <div class="h1 al" style="text-indent:20px;height: 28px;line-height: 35px; background-color: #fff;border-radius: 2px;">公告</div>
            <ul style="box-sizing:border-box;display: flex;flex-direction:column;align-items: center;width:100%;padding:15px;margin-top: 10px;background-color: #B5B5B7;height:100%;">

              <li class="frow"
                  v-for="(v,i) in notices"
                  :key="i"
                  style="margin-top:10px;width: 95%;"
                  @click="showNote(v)" >
                <div class="news-title" style="cursor: pointer">消息{{v.title}}</div>
                <div class="news-date" style="cursor: pointer">{{v.publish_at}}</div>
              </li>

            </ul>
          </el-aside>
        </el-col>
  </el-row>
  <el-footer style="margin-top:15px;color: #fff;">浙ICP备19009031号</el-footer>


<!-- 个人信息 -->
<el-dialog title="个人信息" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="上传图片" ref="uploadElement" prop="avatar" label-width="80px">
            <el-input v-model="form.avatar" v-if="false"></el-input>

                <el-upload
                class="avatar-uploader"
                :action="upload_url"
                :show-file-list="false"
                :data="params"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.avatar" :src="form.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
        </el-form-item>

    <el-form-item label="账号" prop="account" label-width="80px"><el-input v-model="form.account" autocomplete="off" class="w300"></el-input></el-form-item>
    <el-form-item label="邮箱" prop="email" label-width="80px"><el-input v-model="form.email" autocomplete="off" class="w300"></el-input></el-form-item>
    <el-form-item label="旧密码" prop="password" label-width="80px"><el-input v-model="form.password" placeholder="输入旧密码" class="w300" show-password></el-input></el-form-item>
    <el-form-item label="新密码" prop="newPassword" label-width="80px"><el-input v-model="form.newPassword" placeholder="输入新密码" class="w300" show-password></el-input></el-form-item>
    <el-form-item label="确认密码" prop="repeatPassword" label-width="80px"><el-input v-model="form.repeatPassword" placeholder="输入确认密码" class="w300" show-password></el-input></el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="updatePersonMessage()">确 定</el-button>
  </div>
</el-dialog>
<!-- 个人信息 -->

<!--  公告弹窗-->
  <el-dialog title="公告" :visible.sync="dialogNoteVisible">
    <el-form :model="note">
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="note.title" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input v-model="note.content" autocomplete="off" type="textarea"></el-input>
      </el-form-item>

<!--      <el-form-item label="附件" :label-width="formLabelWidth">-->
<!--        <el-row>-->
<!--          <el-col :span="20">-->
<!--            <uploadFile :params="fileParam" @test="changeFileList"></uploadFile>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form-item>-->


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogNoteVisible = false">取 消</el-button>
    </div>
  </el-dialog>
  <!--  公告弹窗-->

</el-container>
</template>

<script>

import {authList} from '@/apilist/auth'
import {mapState,mapActions} from 'vuex'
import {editStaffMsg} from "@/apilist/Personnel";
import {getUsr} from "@/apilist/login"
import $ from 'jquery';
import uploadFile from "./common/uploadFile.vue";

export default {
name:'home',
  components: {uploadFile},
data(){
  return {
    upload_url: this.fun.APP_VUE_UPLOAD_URL,
    userinfo:{},
    inputs:[
      {typeid:'lx',text:'立项'},
      {typeid:'ys',text:'预算'},
      {typeid:'js',text:'结算'},
      {typeid:'cw',text:'财务'},
      {typeid:'xz',text:'行政'},
      ],
    menus_rc:this.fun.common_menu,
    keywords:'',
    select:'',
    img_path:'../../static/img/',
    menus_wait:[],
    menus_handle:[],
    menus_common:[],
    dept_id:'',
    position_id:'',
    dialogFormVisible: false,
    dialogNoteVisible: false,
    formLabelWidth: '80px',
  form: {
      account: '',
      avatar: '',
      email: '',
      password: '',
      newPassword: '',
      repeatPassword: ''
  },
    note: {
      title: '',
      content: ''
    },
  params: {dir: 'avatar'},
    notices: [],
  }
},
computed:{
    ...mapState('ProjectData',['waitCount']),
},
methods:{
    ...mapActions("ProjectData",['getProjectWaitCountActions']),
    ...mapActions("Common",["getCommonActions"]),
  //连接跳转
  goto(path){
   this.$router.push(path);
  },
  loginOut(){

    getUsr().then(res => {
       console.log(res);
    });
    // localStorage.removeItem('asc_paw')
    sessionStorage.setItem('userInfo','');
    this.$router.push('/');
  },
  //通过职位id获取权限
  getUserAuth(){
      //console.log(this.userinfo.position_id,this.userinfo.is_company)
      //return ;
    authList({'id': this.userinfo.position_id,'is_company': this.userinfo.is_company}).then(res => {
        this.menus_wait = res.data.menus_wait
        this.menus_common = res.data.menus_common
        this.menus_handle = res.data.menus_handle
        this.form.avatar = res.data.person.avatar
        this.form.account = res.data.person.account
        this.form.email = res.data.person.email
        this.notices = res.data.notices;

    })
  },
  //初始化用户
  setUser(){
         let userInfo = sessionStorage.getItem('userinfo');
         this.userinfo = JSON.parse(userInfo);
       },

//上传个人图像
handleAvatarSuccess(res, file) {
  console.log(res.data, "res")
        this.form.avatar = res.data.fileUrl;
      },


beforeAvatarUpload(file) {

  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
  }
  return true;
} ,
//修改用户信息
updatePersonMessage()
{
 if(this.form.newPassword != this.form.repeatPassword) {this.$message.error('两次密码输入不一致');}
editStaffMsg(this.form).then(res => {
  if(res.state == 'ok'){
    this.$message({type: 'success', message: '修改成功',onclose: ()=>{
      this.dialogFormVisible = false;
    }});
  }else{
    this.$message.error(res.msg);
  }
});
},
setRightBox(){
  let H = $('#leftBox').height() - 16;
       $('#rightBox').height(H + 'px');
},
  //搜索项目
    searchProject(){
      switch (this.select){
        case 'lx':
        this.$router.push({
          path: '/project_list',
          query: {
            tab: '0',
            keywords: this.keywords,
          },
        });
        break;
        case 'ys':
          this.$router.push({
            path: '/project_list',
            query: {
              tab: '1',
              keywords: this.keywords,
            },
          });
          break;
        case 'js':
          this.$router.push({
            path: '/project_list',
            query: {
              tab: '2',
              keywords: this.keywords,
            },
          });
          break;
        case 'cw':
        case 'xz':

      }


    },

  showNote(item){
    this.note.title = item.title
    this.note.content = item.content
    this.dialogNoteVisible = true;
  },
},

activated() {
  this.setRightBox();
},

  async mounted(){

    //设置用户
    await  this.setUser();
    //获取当前职位权限
    await this.getUserAuth();

    //获取当前用户备审的数量
    await this.getCommonActions({type: ['position','dept','staff']})
    //每5秒请求后台查看待审批数量
    await this.setRightBox();
    let userinfo = this.fun.getUserInfo()
      let that = this
        //setInterval(function(){
            //console.log(userinfo)
            if(userinfo.dept_id != 'undefined' && userinfo.position_id != 'undefined') {
               that.getProjectWaitCountActions()
            }
        //},5000);


},
}
</script>

<style scoped>
@import "../../static/css/home.css";
  .flag{
    margin-top: 10px;
    margin-right: 40px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #409EFF;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px dashed #409EFF;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  @media screen and (max-width: 900px)  {
    .me-logo{
      display: none;
    }
  }
.sc-font{
  font-size:1.3vw;
}
.laycenter{
  height:95vh;
  width:100%;
}
</style>
